<template>
	<ul>
		<li v-for="(item, index) in tabList" :key="index" @click="change(index)">{{ item.name }}</li>
	</ul>
	<!-- 动态组件 -->
	<!-- keep-alive 是 Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 -->
	<keep-alive><component :is="currentComponent.com"></component></keep-alive>
</template>

<script setup>
import A from '@/components/Dyna_A.vue';
import B from '@/components/Dyna_B.vue';
import C from '@/components/Dyna_C.vue';
import { reactive } from 'vue';
let tabList = reactive([
	// markRaw 方法可以将原始数据标记为非响应式的,即原始数据
	{ name: 'A准备好面试题', com: markRaw(A) },
	{ name: 'B准备好简历', com: markRaw(B) },
	{ name: 'C准备好项目', com: markRaw(C) }
]);
let currentComponent = reactive({ com: tabList[0].com });
const change = idx => {
	currentComponent.com = tabList[idx].com;
};
</script>

<style></style>
